# Component: Stream Media Modal

Full-featured media player dialog with contextual widgets and metadata

Media Block

### BEM Anatomy

| Type      | Class Name                 | Description                                                                                                                      |
| --------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| ==Block== | `.as-stream-media-modal`   | The master modal container. Manages transitions and static backdrop behavior.                                                    |
| Element   | `__row`                    | The internal grid container (Bootstrap-based) that facilitates the split between media and utility content.                      |
| Element   | `__col`                    | Layout columns. Modifiers `--video` (8-unit) and `--widget` (4-unit) handle distribution.                                        |
| Modifier  | `__col--video`             | The primary column (typically **8/12 units**). Houses the video player and primary content description.                          |
| Element   | `__video`                  | The 16:9 ratio wrapper for the video player or iframe.                                                                           |
| Element   | `__content`                | Wrapper for the textual information (Title, Subtitles) immediately following the video.                                          |
| Modifier  | `__col--widget`            | The secondary column (typically **4/12 units**). Used for supplementary interactive content.                                     |
| Element   | `__widget`                 | Secondary iframe content (e.g., live chat or live data) shown alongside the video.                                               |
| Element   | `__body`                   | The main scrollable content area of the modal. Manages padding and internal vertical spacing for all text-based elements.        |
| Element   | `__accordion`              | A collapsible container used to organize long descriptions or technical metadata.                                                |
| Element   | `__description`            | The primary text area for the program summary or film synopsis. Supports multi-line prose.                                       |
| Element   | `__subtitles`              | Display area for secondary headings or translated title variations.                                                              |
| Element   | `__keywords`               | A collection of tags or metadata labels associated with the media.                                                               |
| Element   | `__footer`                 | The bottom-most section of the modal, housing schedule and broadcast details.                                                    |
| Element   | `__footer-row`             | A flexbox container within the footer used to align disparate data points (e.g., date on the left, "Watch" button on the right). |
| Modifier  | `__col--date-time`         | A specialized footer column focusing on scheduling information.                                                                  |
| Element   | `__date`                   | The calendar date of the broadcast.                                                                                              |
| Element   | `__time`                   | The container grouping the start and end times of the program.                                                                   |
| Element   | `__time-from`              | The starting timestamp for a program.                                                                                            |
| Element   | `__time-dash`              | A decorative or functional separator (usually a "—") between start and end times.                                                |
| Element   | `__time-to`                | The ending timestamp for a program.                                                                                              |
| Modifier  | `__col--actions`           | A layout column specifically for interactive triggers. Often used to group "Add to Calendar" and "Read More" buttons.            |
| Element   | `__button`                 | The base interactive element within the modal's action area.                                                                     |
| Modifier  | `__button--ics`            | Triggers the download of an iCalendar (.ics) file for schedule integration.                                                      |
| Modifier  | `__button--linked-article` | Links the user to a deep-dive article or blog post related to the stream.                                                        |
| Modifier  | `__button--extern`         | Opens a third-party external site or platform in a new tab.                                                                      |
| Modifier  | `__col--ics`               | Specialized column width or alignment logic for the calendar download section.                                                   |
| Modifier  | `__col--extern`            | Specialized column width or alignment logic for external partner links.                                                          |
| Element   | `__warning`                | A high-visibility alert message (e.g., "Stream ending soon" or "Region restricted").                                             |

### Contextual Rendering Logic

The modal employs strict temporal checks for `MediaProgramItem` types. It will only render the video if the current time falls between the streaming start and end ticks. Otherwise, it displays specialized "Future" or "Past" warnings via the `__warning` element.

##### Generated HTML (Video + Widget Layout)

```html
<div class="as-stream-media-modal__row row">
    <div class="as-stream-media-modal__col--video col-lg-8">
        <div class="as-stream-media-modal__video ratio ratio-16x9">
            <iframe src="..." allowfullscreen></iframe>
        </div>
    </div>
    <div class="as-stream-media-modal__col--widget col-lg-4">
        <iframe src="..." class="as-stream-media-modal__widget"></iframe>
    </div>
</div>
```

##### SCSS

```scss
.as-stream-media-modal {
  &__footer-row {
    width: 100%;
  }
  
  &__col {
    &--date-time {
      text-align: center;
      @include media-breakpoint-up(lg) {
        text-align: start; // Align left on desktop
      }
    }
    &--actions {
      @include media-breakpoint-up(lg) {
        text-align: end; // Align right on desktop
      }
    }
  }

  &__button {
    border-radius: 50%; // Circular action buttons
    margin-left: 0.5rem;
  }
}
```
